import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity,
	Image, PixelRatio, ScrollView
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common';
import CreditService from '../_common/service.js';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import moment from 'moment';
const scale = GLOBAL.SCALE;


export class OccupyDetailsPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '授信占用未核详情',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			}
		}
	};

	constructor(props) {
		super(props);
		let { data, choice } = props.navigation.state.params;
		this.state = {
			loaded: 'loading',
			data,
			stepData: null,
			choice
		}
		this.onoff = false; // 重复提交


	}

	async	componentWillMount () {
		this._getStepData();
	}

	componentWillUnmount () {

	}

	//获取数据 - 步骤
	_getStepData = async () => {
		let { orderId, sourceCode } = this.state.data;
		let requestObj = {
			orderId,
			sourceCode
		}
		let responseData = await CreditService.oyTypeChange(requestObj);
		this.setState({
			loaded: 'data',
			stepData: responseData
		})
	}


	render () {
		let { loaded, data, stepData, choice } = this.state;
		let { orderId, staffName, bizTeamName, organName, companyName, delayDay, sourceDate, overdueDay, overdueDate, notCheckAmount,
			sourceTypeName, sourceCode, accountDay, overdueStatus, overdueAmount, expireDays } = data;
		let textStats = '';
		if (overdueStatus == '2' || (overdueStatus == '1' && overdueAmount <= 10)) {  //未逾期，已逾期，已延期，已关闭
			textStats = '已关闭'
		} else if (overdueStatus == '1' && overdueAmount > 10) {
			textStats = '已逾期'
		} else if (overdueStatus == '0') {
			textStats = '已延期'
		} else {
			textStats = '未逾期'
		}
		return (
			<View style={styles.container}>
				{
					loaded == 'data' ? (<View style={styles.stepBox}>
						<View style={styles.listBox}>
							<View style={styles.listHead}>
								<Text style={styles.title}>{orderId}</Text>
								<Text style={styles.info}>{companyName}丨{staffName}</Text>
								<Text style={{ fontSize: 10 * scale, padding: 12 * scale, paddingTop: 5 * scale, color: '#848A96' }}>(业务组织：{choice.corpName || '-'})</Text>
								<View style={styles.btnBox}>
									<Text style={styles.btn}>{textStats}</Text>
									{overdueStatus == '0' ? (<Text style={styles.btnRed}>延期{delayDay}天</Text>) : null}
								</View>
							</View>
							<View style={styles.itemList}>
								<View style={styles.timeBock}>
									<View style={styles.timeBox}>
										<Text style={styles.timeHead}>占用日期</Text>
										<Text style={styles.timeDown}>{sourceDate && moment(sourceDate).format("YYYY/MM/DD")}</Text>
									</View>
									<View style={styles.timeBox}>
										<Text style={styles.timeHead}>到期日</Text>
										<Text style={styles.timeDown}>{overdueDate && moment(overdueDate).format("YYYY/MM/DD")}</Text>
									</View>
									<View style={styles.timeBox}>
										<Text style={styles.timeHead}>逾期天数</Text>
										<Text style={styles.timeDown}>{overdueDay || '-'}</Text>
									</View>
								</View>
								<View style={styles.timeBock}>
									<View style={styles.timeBox}>
										<Text style={styles.timeHead}>逾期金额</Text>
										<Text style={styles.timeDown}>￥{overdueAmount || '-'}</Text>
									</View>
									<View style={styles.timeBox}>
										<Text style={styles.timeHead}>合同期限</Text>
										<Text style={styles.timeDown}>{expireDays || '-'}</Text>
									</View>
									<View style={styles.timeBox}>
										<Text style={styles.timeHead}>账期</Text>
										<Text style={styles.timeDown}>{accountDay}</Text>
									</View>
								</View>
								<View style={styles.timeBock}>
									<View style={[styles.timeBox, { width: 270 * scale }]}>
										<Text style={styles.timeHead}>依据凭单</Text>
										<Text style={styles.timeDown}>{sourceTypeName || ''}</Text>
										<Text style={styles.timeDown}>{sourceCode || '-'}</Text>
									</View>
								</View>
								<View style={styles.timeBock}>
									<View style={[styles.timeBox, { width: 300 * scale }]}>
										<Text style={styles.timeHead}>业务员</Text>
										<Text style={[styles.timeHead, { paddingTop: 5 * scale }]}>
											{staffName || '--'} | {bizTeamName || '--'} | {organName || '--'}</Text>
									</View>
								</View>
							</View>
							<View style={styles.total2}>
								{notCheckAmount || notCheckAmount == 0 ? (<Text style={styles.totalKey2}>未核 <Text style={styles.totalValue2}>¥{notCheckAmount} 元</Text></Text>) : (
									<Text>-</Text>
								)}
							</View>
						</View>

						<View style={styles.stepBox}>
							<Text style={styles.stepTitle}>操作记录</Text>
							<View style={styles.stepList}>
								{stepData && stepData.length ? null : <Text>暂无操作记录</Text>}
								<ScrollView style={{ flex: 1 }}>
									{
										stepData && stepData.map((item, index) => {
											let { checkAmount, delayDay, action, reasonName, remark } = item;
											return (
												<View style={styles.stepLine} key={index}>
													<View style={styles.stepLeft}>
														<Text style={styles.stepText}>{item.checkTime && item.checkTime.split(' ')[0]}</Text>
														<Text style={styles.stepText}>{item.checkTime && (item.checkTime.split(' ')[1].split(':')[0] + ':' + item.checkTime.split(' ')[1].split(':')[1])}</Text>
													</View>
													<View style={styles.stepMid}>
														<View style={styles.stepItem}>
															<View style={[styles.roundBox, index == 0 ? styles.roundActive : null]}>
																<View style={styles.nrRound}></View>
															</View>
															{
																index == (stepData.length - 1) ? null : (<View style={styles.stepXian}></View>)
															}
														</View>
													</View>
													<View style={styles.stepRight}>
														<Text style={styles.stepText2}>
															{action}
															{
																action === '延期' ? delayDay + '天' : null
															}
															{reasonName && ' (' + reasonName + ')'}
														</Text>
														{
															remark ? (<Text style={styles.stepText}>备注：{remark}</Text>) : null
														}
													</View>
												</View>
											)
										})
									}
								</ScrollView>
							</View>

						</View>
					</View>) : <PageStatusIndex status={loaded} emptyText={'暂无详情'} emptyImgSource={require('../../../../imgs/global/messageEmpty.png')} />
				}


			</View >

		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#F4F7FE',
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
	},
	tabText: {
		color: '#fff',
		fontSize: 12 * scale,
		lineHeight: 30 * scale,
		textAlign: 'center'
	},
	tabActive: {
		borderBottomWidth: 2 * scale,
		borderStyle: 'solid',
		borderBottomColor: style.color.white,
		width: 70 * scale
	},
	listBox: {
		width: 351 * scale,
		backgroundColor: style.color.white,
		borderRadius: 6 * scale,
		marginBottom: 18 * scale,
		marginTop: 21 * scale
	},
	listHead: {
		height: 75 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		marginBottom: 18 * scale,
		position: 'relative'
	},
	title: {
		marginTop: 14 * scale,
		fontSize: 13 * scale,
		color: style.color.atrous,
		paddingLeft: 12 * scale
	},
	info: {
		paddingLeft: 12 * scale,
		fontSize: 12 * scale,
		color: '#848A96',
		marginTop: 4 * scale
	},
	infoName: {
		paddingLeft: 12 * scale,
	},
	btnBox: {
		position: 'absolute',
		top: 14 * scale,
		right: 19 * scale,
		justifyContent: 'flex-end'
	},
	btn: {
		color: '#0E7FFD',
		fontSize: 14 * scale,
		fontWeight: 'bold',
		textAlign: 'right',
	},
	btnRed: {
		textAlign: 'right',
		fontSize: 10 * scale,
		color: '#D0021B'
	},
	timeBock: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		paddingBottom: 20 * scale,
	},
	timeBox: {
		width: 90 * scale
	},
	timeHead: {
		fontSize: 12 * scale,
		color: style.color.atrous,
	},
	timeDown: {
		fontSize: 14 * scale,
		color: style.color.atrous,
		fontWeight: 'bold',
		marginTop: 4 * scale
	},
	itemHead: {
		height: 35 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
	},
	itemTitle: {
		fontSize: 13 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		color: style.color.atrous,
		lineHeight: 35 * scale
	},
	itemList: {
		marginLeft: 10 * scale,
		marginRight: 10 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		paddingTop: 2 * scale,
		paddingBottom: 2 * scale,
	},
	money: {
		fontSize: 14 * scale,
		color: style.color.atrous,
		fontWeight: 'bold'
	},
	itemText: {
		color: style.color.atrous,
		fontSize: 13 * scale,
	},
	sellText: {
		color: '#F5A623',
		fontSize: 14 * scale,
		fontWeight: 'bold',
		paddingLeft: 10 * scale
	},
	buyText: {
		color: '#82CD4B',
		fontSize: 14 * scale,
		fontWeight: 'bold',
		paddingLeft: 10 * scale
	},
	total: {
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center',
		paddingRight: 10 * scale,
		height: 35 * scale,
		lineHeight: 35 * scale
	},
	totalValue: {
		fontSize: 16 * scale,
		fontWeight: 'bold',
	},
	totalKey: {
		fontSize: 12 * scale,
		color: style.color.atrous
	},
	total2: {
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center',
		paddingRight: 10 * scale,
		height: 45 * scale,
		borderTopWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderTopColor: style.color.gray,
	},
	totalValue2: {
		fontSize: 14 * scale,
		fontWeight: 'bold',
		color: '#D0021B'
	},
	totalKey2: {
		fontSize: 12 * scale,
		color: '#D0021B',
		fontWeight: 'bold'
	},
	stepList: {
		marginTop: 25 * scale,
		paddingLeft: 24 * scale,
		flex: 1,
		paddingBottom: 20 * scale
	},
	stepBox: {
		flex: 1,
	},
	stepTitle: {
		fontSize: 14 * scale,
		color: style.color.atrous,
		fontWeight: 'bold',
		paddingLeft: 12 * scale
	},
	stepLine: {
		height: 45 * scale,
		flexDirection: 'row'
	},
	stepLeft: {
		width: 60 * scale,
	},
	stepText: {
		fontSize: 10 * scale,
		color: '#848A96'
	},
	stepText2: {
		fontSize: 12 * scale,
		color: style.color.atrous,
		marginRight: 10 * scale,
		fontWeight: 'bold'
	},
	stepRight: {
		width: 250 * scale,
	},
	stepMid: {
		width: 28 * scale,
	},
	stepItem: {
		width: 28 * scale,
		flexDirection: 'row',
		justifyContent: 'center'
	},
	roundBox: {
		width: 12 * scale,
		height: 12 * scale,
		borderRadius: 5 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		position: 'absolute',
		zIndex: 2
	},
	roundActive: {
		backgroundColor: '#0E7FFD',
		opacity: .5,
	},
	nrRound: {
		width: 6 * scale,
		height: 6 * scale,
		backgroundColor: '#0E7FFD',
		borderRadius: 3 * scale,
	},
	stepXian: {
		height: 39 * scale,
		width: 2 * scale,
		backgroundColor: '#D2D6DD',
		marginLeft: 5 * scale,
		zIndex: 0,
		position: 'absolute',
		top: 9 * scale
	},
	stepText3: {
		fontSize: 14 * scale,
		color: style.color.atrous
	},


})